<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="listView">
			<text>Producs</text>
			<searchBar class="searchBar"></searchBar>
			<view class="container">
				<view class="leftMenus">
					<view class="menu" @click="handleActiveMenu(item,index)" v-for="item,index in producsData"
						:key="`menu${index}`">
						<view class="menubg" :class="{active:activeIndex==index}"> </view>
						{{item.type}}
					</view>
				</view>
				<scroll-view class="rightProducs" :scroll-y="true" :scroll-with-animation="true"
					:scroll-into-view="scrollIntoView" @scroll="handleScroll">
					 
					<view class="card" v-for="item,index  in producsData" :id="`produc${index}`" :key="`pro${index}`">
						<view class="label">{{item.type}}</view>

						<template v-if="item.data&&item?.data?.length>0">
							<view class="produc" v-for="pro in item.data" @click="showProduc(pro.id)">
								<view class="top">
									<view class="left" :style="`background-image:url(./static/cake/${pro.image});`">
										<view v-if="item.count&&item.count>0" class="countNO">
											{{item.count}}
										</view>
									</view>
									<view class="right">
										<view class="">
											{{pro.text}}
										</view>
										<view class="">
											￥{{pro.price}}
										</view>
									</view>
								</view>

								<!-- <uni-number-box v-model="item.count"></uni-number-box> -->
							</view>
						</template>
						<view v-else class="emptyPro">
							暂无商品
						</view>

					</view>
					<view class="bottomTip">
						到底啦
					</view>
					<view class="bottomBlank"></view>
					 
				</scroll-view>
			</view>
			<view class="grandientView"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,getCurrentInstance
	} from 'vue';
	import searchBar from '@/components/searchBar.vue'
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme,
		searchWord
	} = storeToRefs(systemStore);
 
	import useProductStore from '@/store/modules/product'
	const productStore = useProductStore()
	const {
		products,
		comments
	} = storeToRefs(productStore);
	const instance = getCurrentInstance(); 

	//产品数据
	let producsData = computed(() => {
		let _typesArray = products.value.map(row => row.type)
		let _typesArrayD = _typesArray.filter((row, index) => _typesArray.indexOf(row) == index)

		return _typesArrayD.map(row => ({
			type: row,
			data: products.value.filter(item => item.type == row && item.text.indexOf(searchWord.value) >= 0)
		}))
	})
	//选中菜单
	let activeIndex = ref(0)
	//滚动到指定的ID位置
	let scrollIntoView = ref('')
	//滚动节流
	let scrollTimeOut = null




	//滚动事件
	let handleScroll = async (e) => {
		 
		// if(!scrollTimeOut)
		// {
			
			
			
		// let query = uni.createSelectorQuery().in(instance.proxy);
		// query.select(`#produc1`).boundingClientRect();
		// // 等待 exec 完成
		// let _res = await new Promise((resolve) => {
		// 	query.exec(resolve);
		// });
		// console.log(4234,_res);
		
		// 获取元素的位置信息
		let query = uni.createSelectorQuery().in(instance.proxy);
		for (let i = 0; i < producsData.value.length; i++) {
			query.select(`#produc${i}`).boundingClientRect()
		}

		// 等待 exec 完成
		let _res = await new Promise((resolve) => {
			query.exec(resolve);
		});
		console.log(4234,_res);
		for (let _index = 0; _index < _res.length; _index++) {
			if (_res[_index].top > 70) {
				activeIndex.value = _index
				break;
			}
		} 

		// 	scrollTimeOut=setTimeout(()=>{
		// 		clearTimeout(scrollTimeOut)
		// 		scrollTimeOut=null
		// 	},300)
		// } 
	}
	//显示产品详情
	let showProduc = (id) => {
		uni.$emit('showProDetail', id)
	}
	//点击菜单
	let handleActiveMenu = (data, index) => {
		activeIndex.value = index
		scrollIntoView.value = `produc${index}`
	}
	onMounted(async () => {

	})
</script>

<style lang="scss" scoped>
	.bodyView {
		width: 100vw;
		height: 100%;
	}

	.listView {
		width: 100vw;
		height: 100%;
		//padding: 0 $mainPadding;
		@include flex-teng(column, flex-start);
		box-sizing: border-box;
		position: relative;

		.searchBar {
			margin-top: $mainPadding;
			width: calc(100% - $mainPadding * 2);
		}

		.grandientView {
			width: 100%;
			height: 340rpx;
			position: absolute;
			left: 0;
			bottom: -2px;
			z-index: 11;

			@include useTheme {
				background: linear-gradient(to top, getValue('bgColor'), getValue('bgColor'), getValue('bgColorReflect'), transparent);
			}
		}

		.container {
			margin-top: $mainPadding;
			width: 100%;
			height: 100%;
			@include flex-teng;

			.leftMenus {
				width: 25%;
				height: 100%;
				padding-left: $mainPadding;
				@include flex-teng(column, flex-start);

				.menu {
					width: 100%;
					@include flex-teng;
					padding: $mainPadding 0;

					&+.menu {
						margin-top: 10rpx;
					}

					position: relative;

					// @include useTheme {
					// 	background-color: getValue("bgColorReflect"); 
					// }  
					.menubg {
						position: absolute;
						width: 0%;
						height: 100%;
						z-index: -1;
						top: 0;
						opacity: 0;
						background-color: $mainColor;
						transition: all 0.4s ease-in-out;
						border-radius: 40px;

						&.active {
							width: 100%;
							opacity: 0.9;
						}
					}
				}
			}

			.rightProducs {
				flex: 1;
				height: calc(100vh - 60px - 60rpx - 92rpx - $mainPadding - env(safe-area-inset-bottom));
				padding-left: $mainPadding;

				@include flex-teng(column, flex-start);

				.card {
					box-sizing: border-box;
					padding: $mainPadding 30rpx;
					width: calc(100% - $mainPadding);
					border-radius: 40px;

					&+.card {
						margin-top: $mainPadding;
					}

					@include useTheme {
						background-color: getValue('bottombgColor');
					}

					.label {
						font-size: $fontSize;
					}

					.emptyPro {
						text-align: center;
						margin-top: 20rpx;
						font-size: $fontSize3;

						@include useTheme {
							color: getValue('textColor2');
						}
					}

					.produc {
						padding: $mainPadding;
						font-size: $fontSize2;
						border-bottom: 1px solid rgba(143, 143, 143, 0.6);
						@include flex-teng(column, space-between, flex-end);

						.top {
							width: 100%;
							@include flex-teng(row, space-between);

							.left {
								width: 80rpx;
								height: 80rpx;
								border-radius: 20rpx;
								background-size: cover;
								background-repeat: no-repeat;
								position: relative;

								.countNO {
									position: absolute;
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
									background-color: red;
									@include flex-teng;
									top: -20rpx;
									right: -20rpx;
								}
							}

							.right {
								@include flex-teng(column, space-between, flex-end);
								font-size: $fontSize;
							}
						}
					}
				}

				.bottomTip {
					padding: 70rpx;
					@include flex-teng;
					font-size: $fontSize3;
					opacity: 0.6;
				}

				.bottomBlank {
					height: 200rpx;
				}

			}
		}
	}
</style>